<template>
  <div id="bg">
    <div id="lp">
      <div id="lmt">垫江县科技特派员系统</div>
      <div id="lmf">
        <div v-if="isPhoneLogin">
          <div class="lms">
            <el-input
              placeholder="请输入用户名"
              clearable
              v-model="loginObj.userName"
            >
              <template slot="prepend">
                <div class="el-icon-user"></div>
              </template>
            </el-input>
          </div>
          <div class="lms">
            <el-input
              placeholder="请输入密码"
              show-password
              v-model="loginObj.userPass"
            >
              <template slot="prepend">
                <div class="el-icon-lock"></div>
              </template>
            </el-input>
          </div>
          <div class="lms">
            <el-select placeholder="请选择登录角色" v-model="loginObj.role">
              <el-option value="超级管理员" key="超级管理员"></el-option>
              <el-option value="普通管理员" key="普通管理员"></el-option>
              <el-option value="科技特派员" key="科技特派员"></el-option>
              <el-option value="普通用户" key="普通用户"></el-option>
            </el-select>
          </div>
        </div>
        <div v-else>
          <div class="lms">
            <el-input placeholder="请输入手机号" clearable v-model="loginPhone">
              <template slot="prepend">
                <div class="el-icon-user"></div>
              </template>
            </el-input>
          </div>
          <div class="lms">
            <el-col :span="14">
              <el-input placeholder="请输入验证码" v-model="loginCode">
                <template slot="prepend">
                  <div class="el-icon-lock"></div>
                </template>
              </el-input>
            </el-col>
            <el-button
              style="margin-left: 20px"
              type="infor"
              @click="getLoginCode"
            >{{
                countDown > 0 ? countDown + "s后重发" : "获取验证码"
              }}</el-button
            >
          </div>
        </div>
        <el-row>
          <el-col :offset="16">
            <span
              style="cursor: pointer; color: blue"
              @click="isPhoneLogin = !isPhoneLogin"
            >
              <div v-if="isPhoneLogin" style="margin-left: 20px">
                验证码登录
              </div>
              <div v-else style="margin-left: 67px">返回</div>
            </span>
          </el-col>
          <el-col>
            <el-button
              @click="login"
              style="width: 90%; font-size: 24px; margin: 20px"
              type="warning"
            >登录</el-button
            >
          </el-col>
        </el-row>
        <div style="text-align: center; color: white">
          没有账号？<span
          style="cursor: pointer; color: orange"
          @click="registerDialogVisible = true"
        >点击注册</span
        >
        </div>
      </div>
    </div>

    <!-- 注册弹窗 -->
    <el-dialog
      title="用户注册"
      :visible.sync="registerDialogVisible"
      width="30%"
      @close="resetRegisterForm"
    >
      <div class="register-dialog-content">
        <div class="register-lms">
          <el-input
            placeholder="请输入用户名"
            clearable
            v-model="registerObj.userName"
          >
            <template slot="prepend">
              <div class="el-icon-user"></div>
            </template>
          </el-input>
        </div>
        <div class="register-lms">
          <el-input
            placeholder="请输入用户昵称"
            clearable
            v-model="registerObj.userNickname"
          >
            <template slot="prepend">
              <div class="el-icon-user"></div>
            </template>
          </el-input>
        </div>
        <div class="register-lms">
          <el-input
            placeholder="请输入密码"
            show-password
            v-model="registerObj.userPass"
          >
            <template slot="prepend">
              <div class="el-icon-lock"></div>
            </template>
          </el-input>
        </div>
        <div class="register-lms">
          <el-input
            placeholder="请再次输入密码"
            show-password
            v-model="registerObj.confirmPass"
          >
            <template slot="prepend">
              <div class="el-icon-lock"></div>
            </template>
          </el-input>
        </div>
        <div class="register-lms">
          <el-input
            placeholder="请输入邮箱"
            clearable
            v-model="registerObj.userEmail"
          >
            <template slot="prepend">
              <div class="el-icon-connection"></div>
            </template>
          </el-input>
        </div>
        <div class="register-lms">
          <el-input
            placeholder="请输入手机号"
            clearable
            v-model="registerObj.mobile"
          >
            <template slot="prepend">
              <div class="el-icon-phone"></div>
            </template>
          </el-input>
        </div>
        <div class="register-lms">
          <el-input
            placeholder="请输入身份证号"
            clearable
            v-model="registerObj.cardId"
          >
            <template slot="prepend">
              <div class="el-icon-id"></div>
            </template>
          </el-input>
        </div>
        <div class="register-lms">
          <el-input
            placeholder="请输入真实姓名"
            clearable
            v-model="registerObj.realName"
          >
            <template slot="prepend">
              <div class="el-icon-user"></div>
            </template>
          </el-input>
        </div>
        <div class="register-lms">
          <el-col :span="14">
            <el-input
              placeholder="请输入验证码"
              v-model="registerObj.verifyCode"
            >
              <template slot="prepend">
                <div class="el-icon-lock"></div>
              </template>
            </el-input>
          </el-col>
          <el-button
            style="margin-left: 20px"
            type="info"
            :disabled="countDown > 0"
            @click="getVerifyCode"
          >{{
              countDown > 0 ? countDown + "s后重发" : "获取验证码"
            }}</el-button
          >
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="registerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="doRegister">注 册</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "Login",
  data: () => ({
    loginPhone: "",
    loginCode: "",
    countDown: 0,
    registerObj: {
      userName: "",
      userPass: "",
      confirmPass: "",
      mobile: "",
      verifyCode: "",
      userNickname: "",
      userEmail: "",
      userIdCard: "",
      realName: "",
    },
    registerDialogVisible: false,
    isPhoneLogin: true,
    loginObj: {
      role: "普通用户",
    },
  }),
  methods: {
    startCountDown() {
      this.countDown = 60;
      const timer = setInterval(() => {
        this.countDown--;
        if (this.countDown === 0) {
          clearInterval(timer);
        }
      }, 1000);
    },
    getVerifyCode() {
      if (this.countDown === 0) {
        let form = new FormData();
        form.append("mobile", this.registerObj.mobile);
        this.$http.post("/userInfo/sendRegisterCode", form).then((resp) => {
          if (resp.data.code == 200) {
            this.$message({
              type: "success",
              message: resp.data.message,
            });
            this.startCountDown();
          } else {
            this.$message({
              type: "warning",
              message: resp.data.message,
            });
          }
        });
      }
    },
    getLoginCode() {
      if (this.countDown === 0) {
        let form = new FormData();
        form.append("mobile", this.loginPhone);
        this.$http.post("/userInfo/sendLoginCode", form).then((resp) => {
          if (resp.data.code == 200) {
            this.$message({
              type: "success",
              message: resp.data.message,
            });
            this.startCountDown();
          } else {
            this.$message({
              type: "warning",
              message: resp.data.message,
            });
          }
        });
      }
    },
    doRegister() {
      if (this.registerObj.userPass !== this.registerObj.confirmPass) {
        this.$message({
          type: "error",
          message: "两次输入的密码不一致，请重新输入",
        });
        return;
      }
      let form = new FormData();
      form.append("userName", this.registerObj.userName);
      form.append("userPass", this.registerObj.userPass);
      form.append("userNickname", this.registerObj.userNickname);
      form.append("userEmail", this.registerObj.userEmail);
      form.append("userPhone", this.registerObj.mobile);
      form.append("verifyCode", this.registerObj.verifyCode);
      form.append("carId", this.registerObj.cardId);
      form.append("realName", this.registerObj.realName);
      this.$http.post("/userInfo/register", form).then((resp) => {
        if (resp.data.code == 200) {
          this.$message({
            type: "success",
            message: resp.data.message,
          });
          this.registerDialogVisible = false;
        } else {
          this.$message({
            type: "warning",
            message: resp.data.message,
          });
        }
      });
    },
    resetRegisterForm() {
      this.registerObj = {
        userName: "",
        userPass: "",
        confirmPass: "",
        userNickname: "",
        userEmail: "",
        mobile: "",
        verifyCode: "",
        cardId: "",
        realName: "",
      };
      this.countDown = 0;
    },
    login() {
      this.$http.post("/userInfo/login", this.loginObj).then((resp) => {
        if (resp.data.code == 200) {
          window.location.href = "/";
        } else {
          this.$message({
            type: "error",
            message: resp.data.message,
          });
        }
      });
    },
  },
};
</script>

<style>
#lmf {
  border-left: 1px solid gray;
  border-right: 1px solid gray;
  border-bottom: 1px solid gray;
  border-radius: 0 0 15px 15px;
}

#title {
  width: 100%;
  height: 50px;
  background-color: #42b983;
  text-align: center;
  font-size: 24px;
  font-family: 正楷;
}

#bg {
  background-image: url(../../static/images/登录背景.png);
  background-size: cover;
  background-position: center;
  width: 1366px;
  height: 541px;
  padding-top: 100px;
}

#lp {
  height: 360px;
  width: 360px;
  margin-left: 180px;
}

#lmt {
  width: 100%;
  height: 100px;
  background-color: rgba(167, 150, 128, 0.4);
  border-radius: 15px 15px 0 0;
  color: white;
  font-size: 28px;
  text-align: center;
  line-height: 100px;
}

.lms {
  width: 90%;
  height: 60px;
  margin: 0 auto;
  border-bottom: 1px solid gray;
  padding-top: 20px;
}

#sub {
  width: 90%;
  height: 50px;
  margin: 0 auto;
  display: block;
  color: white;
  font-size: 24px;
  background-color: blue;
  border-radius: 5px;
  border: none;
}
</style>
